<template>
  <div id="app">
    <div class="bar" v-if="this.$route.meta.Tabbarshow">
      <router-link :to="{ path: '/' }"
      @click.native="Changebar(1)"
       :class="this.CurrentBar==1?'Active':''"
        ><img
          src="https://java.crmeb.net/static/tabBar/shouxuan.png"
        />首页</router-link
      >
      <router-link :to="{ path: '/Cate' }"
      @click.native="Changebar(2)"
:class="this.CurrentBar==2?'Active':''"
        ><img src="https://java.crmeb.net/static/tabBar/fenwei.png" />
        分类</router-link
      >
      <router-link :to="{ name: 'FxhDemoCartView' }"
      @click.native="Changebar(3)"
:class="this.CurrentBar==3?'Active':''"
        ><img src="https://java.crmeb.net/static/tabBar/gouwei.png" />
        购物车</router-link
      >
      <router-link :to="{ name: 'FxhDemoMineView' }"
      @click.native="Changebar(4)"
:class="this.CurrentBar==4?'Active':''"
        ><img src="https://java.crmeb.net/static/tabBar/wowei.png" />
        我的</router-link
      >
    </div>
 
<keep-alive>
    <router-view></router-view>
</keep-alive>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      CurrentBar:sessionStorage.getItem("index"),
    }
  },
  methods:{
    Changebar(index){
      sessionStorage.setItem("index",index)
      this.CurrentBar=sessionStorage.getItem("index");
    }
  }
};
</script>
<style lang="scss">
* {
  margin: 0;
  padding: 0;
  user-select: none;
}
html {
  background: #f5f2f3;
}
#app {
  position: relative;
  background: #f5f2f3;
}
a {
  text-decoration: none; /* 去除默认的下划线 */
  color: #a5a5a5; /* 去除默认的颜色和点击后变化的颜色 */
  @include cloumn-center;
}
.bar {
  @include around;
  width: 375px;
  position: fixed;
  bottom: 0;
  padding-top: 5px;
  z-index: 1000;
  background: white;
  img {
    width: 24px;
    height: 24px;
  }
}
.Active{
  color: rgb(252, 65, 65) !important;
}
</style>
